<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息页面</title>

    <!-- Import style -->
    <link rel="stylesheet" href="./static/element-plus/index.css" />
    <!-- Import Vue 3 -->
    <script src="./static/js/vue.global.js"></script>
    <!-- Import component library -->
    <script src="./static/element-plus/index.full.js"></script>
    <style>
        .el-carousel-item img{
            width: 100%;
            height: 100%;

        }
    </style>
</head>
  <body>
    <div id="app">
        <el-container>
            <el-header>
                <el-row>
                    <el-col :span="4" style="display: flex;flex-direction:row;align-items :center">
                        <img src="./static/images/logo.png" style="height: 60px;">
                        <h2 style="padding-left: 4px;">技术社区</h2>
                    </el-col>
                    <el-col :span="8">
                        <el-menu  default-active="activeIndex" mode="horizontal" style="border-bottom: none !important;">
                            <el-menu-item index="1">首页</el-menu-item>
                            <el-menu-item index="2">文章</el-menu-item>
                            <el-menu-item index="3">课程</el-menu-item>
                            <el-menu-item index="4">商城</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col :span="8" style="height: 60px; line-height: 60px;" class="hidden-xs-only">
                        <el-input/>
                    </el-col>
                    <el-col :span="4" style="text-align: right; height: 60px; line-height: 60px;" class="hidden-xs-only">
                        <img src="./Static/images/avatar.png" style="height: 50px;width: 40px;">
                        <p>{{user.name}}</p>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside>
                    <el-card>
                        <el-menu default-active="activeIndex">
                            <el-menu-item inex="1">个人主页</el-menu-item>
                            <el-menu-item inex="2">个人资料</el-menu-item>
                            <el-menu-item inex="3">账号设置</el-menu-item>
                            <el-menu-item inex="4">消息设置</el-menu-item>
                            <el-menu-item inex="5">标签管理</el-menu-item>
                        </el-menu>
                    </el-card>
                </el-aside>
                <el-main>
                    <el-card>
                        <el-row>
                            <el-col :span="4">
                                <img src="./Static/images/avatar.png" style="height: 80px;width: 70px;">
                            </el-col:>
                            <el-col :span="20">
                                <h2>{{user.username}}</h2>
                                <span>性别:{{user.gender}}</span>
                                <span>签名档：{{user.sign}}</span>
                            </el-col>
                        </el-row>
                    </el-card>
                    <el-card>
                        <el-tabs>
                            <el-tab-pane label="我发布的文章">
                                <div v-if="myArticleList.length>0">列表数据</div>
                                <el-empty v-else description="暂无数据" />

                            </el-tab-pane>
                            <el-tab-pane label="我收藏的文章">
                                <div v-if="articleList.length>0">列表数据</div>
                                <el-empty v-else description="暂无数据" />
                            </el-tab-pane>
                            <el-tab-pane label="我收藏的课程">
                                <div v-if="courseList.length>0">列表数据</div>
                                <el-empty v-else description="暂无数据" />
                            </el-tab-pane>
                            <el-tab-pane label="我收藏的商品">
                                <div v-if="productList.length>0">列表数据</div>
                                <el-empty v-else description="暂无数据" />
                            </el-tab-pane>
                        </el-tabs>
                    </el-card>
                </el-main>
            </el-container>

            <el-footer>
                <el-row>
                    <el-col :xs="24" :lg="8">
                        <div>
                            <img src="./static/images/logo.png" style="height: 60px;">
                        </div>
                        <div>
                            <h2>技术社区</h2>
                            <p>致力于构建一个专业的IT技术交流社区</p>
                        </div>
                    </el-col>
                    <el-col :xs="24" :lg="8">
                        <div>
                            <el-link type="primary">首页</el-link>
                            <el-link type="primary">文章</el-link>
                            <el-link type="primary">课程</el-link>
                            <el-link type="primary">商城</el-link>
                        </div>
                        <div>
                            <el-link type="primary">关于我们</el-link>
                            <el-link type="primary">使用手册</el-link>
                            <el-link type="primary">隐私条款</el-link>
                            <el-link type="primary">建议反馈</el-link>
                        </div>
                    </el-col>
                    <el-col :xs="24" :lg="8">
                        <div>
                            <h2>联系我们</h2>
                            <p>电话:111111</p>
                            <p>邮箱：111111@11.com</p>
                        </div>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center" style="margin-top: 20px;">
                    <p >软件开发工作室版权所有</p>
                </el-row>
    
            </el-footer>
        </el-container>
    </div>
    </body>
    <script>
        var App = {
            data() {
                return {
                    user:{
                        username:"hello vue",
                        gender:"男",
                        job:"前端开发工程师",
                        sign:"",
                    },
                    
                    activeIndex: '1',
                    isLoggedIn: false,
                    myArticleList : [],
                    productList:[],
                    courseList:[],
                    articleList:[],
                }
            },
            methods: {
         
                toggleLogin() {
                    this.isLoggedIn = !this.isLoggedIn; 
                }
            }
        }
        Vue.createApp(App).use(ElementPlus).mount("#app")
    </script>

</html>